<template>
    <div>
        <div>
            <el-input class="searchInput" 
                    clearable
					@clear="keywordClear"
                    v-model="keyword"
                    placeholder="请输入公司名关键字搜索"
                    @keydown.enter.native="doSearch"
                    prefix-icon="el-icon-search">
            </el-input>
            <el-button icon="el-icon-search"  type="primary" @click="doSearch">搜索</el-button> 
            <el-button icon="el-icon-plus" @click="showAddView" type="primary">添加账户</el-button>
        </div>
        <div style="margin-top: 10px">
            <el-table
                :data="baseUsers"
                stripe
                border
                style="width: 58%">
                <el-table-column
                    prop="name" label="公司名" width="260">
                </el-table-column>
                <el-table-column
                    prop="username" label="用户名" width="150">
                </el-table-column>
                <el-table-column
                    prop="pwd" label="密码" width="140">
                </el-table-column>
				<el-table-column
				    prop="enabled" label="状态" width="75">
					<template slot-scope="scope">
						<el-tag  type="success" v-if="scope.row.enabled == true">正常</el-tag>
						<el-tag  type="danger" v-if="scope.row.enabled == false">冻结</el-tag>
					</template>
				</el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                            <el-button @click="showEditView(scope.row)" style="padding: 8px" size="small" type="primary">编辑</el-button>
                            <el-button @click="doDelete(scope.row)" style="padding: 8px" size="small" type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <el-pagination
				@current-change="currentChange"
				:current-page="current"
                :page-size="size"
                layout="total, prev, pager, next"
                :total="total">
            </el-pagination>
        </div>
        <el-dialog :title="title" :visible.sync="dialogVisible" width="35%" center :close-on-click-modal="false" :destroy-on-close="destroyOnClose">
                <div style="display: flex;justify-content: flex-start;">
                    <el-form :model="baseUserInfo" :rules="rules" ref="baseUserForm" label-width="100px">
						<el-form-item label="公司名" prop="name">
						    <el-select v-model="baseUserInfo.name" placeholder="请选择公司名" filterable style="width: 260px;" :disabled="disabled">
						        <el-option
						          v-for="item in bases"
						          :key="item.name"
						          :label="item.name"
						          :value="item.name">
						        </el-option>
						      </el-select>
						</el-form-item>
                        <el-form-item label="用户名" prop="username">
                            <el-input size="small" style="width:180px" prefix-icon="el-icon-edit" 
                            v-model="baseUserInfo.username" placeholder="建议使用公司中文拼音"></el-input>
                        </el-form-item> 
                        <el-form-item label="密码" prop="pwd">
                            <el-input size="small" style="width:180px" prefix-icon="el-icon-edit" 
                            v-model="baseUserInfo.pwd" placeholder="请输入密码"></el-input>
                        </el-form-item>
						<el-form-item label="状态" prop="enabled">
							<el-switch
							  v-model="baseUserInfo.enabled"
							  active-text="正常"
							  inactive-text="冻结"
							  active-color="#13ce66"
							  inactive-color="#ff4949">
							</el-switch>
						</el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="doAddOrUpdate">确 定</el-button>
                </span>
            </el-dialog>
    </div>
</template>

<script>
    export default {
        data () {
            return {
				keyword: '',
                baseUsers:[],
                total: 0,
				current: 1,
                size: 10,
                title:'',
                dialogVisible: false,
				destroyOnClose: false,
				disabled: false,
                baseUserInfo:{},
				bases:[],
				selectWidth: 240,
                rules:{
					name: [{required: true, message: '请输入公司名', trigger: 'blur'}],
                    username: [{required: true, message: '请输入用户名',trigger: 'blur'}],
                    pwd: [{required: true, message: '请输入密码', trigger: 'blur'}],
                }
            }
        },
		mounted() {
			this.initBaseUsers();
			this.initBases();
		},
        methods:{
			initBaseUsers(){
				let url = '/system/user/base?current=' + this.current + '&size=' + this.size + '&keyword=' + this.keyword;
				this.getRequest(url).then(resp => {
					if(resp){
						this.baseUsers = resp.data;
						this.total = resp.total;
					}
				})
			},
			initBases(){
				this.getRequest('/system/user/bases_name').then(resp => {
					if(resp){
						this.bases = resp;
					}
				})
			},
			keywordClear(){
				this.current = 1;
				this.initBaseUsers();
			},
            doSearch(){
				this.current = 1;
				this.initBaseUsers();
            },
			doAddOrUpdate(){
				if (this.baseUserInfo.id) {
					this.$refs['baseUserForm'].validate(valid => {
						if (valid) {
							this.putRequest("/system/user/", this.baseUserInfo).then(resp => {
								if (resp) {
									this.dialogVisible = false;
									this.initBaseUsers();
								}
							})
						}
					});
				} else {
					this.$refs['baseUserForm'].validate(valid => {
						if (valid) {
							this.postRequest("/system/user/base", this.baseUserInfo).then(resp => {
								if (resp) {
									this.dialogVisible = false;
									this.initBaseUsers();
									this.initBases();
								}
							})
						}
					});
				}
			},
			doDelete(data){
				this.$confirm('此操作将永久删除【' + data.name + '】, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleteRequest("/system/user/" + data.id).then(resp => {
						if (resp) {
							this.initBaseUsers();
							this.initBases();
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			emptyBaseUserInfo(){
				this.baseUserInfo = {};
				this.baseUserInfo.enabled = true;
			},
            showAddView(){
				this.emptyBaseUserInfo();
                this.title = '添加基地账号';
                this.dialogVisible = true;
				this.disabled = false;
				this.destroyOnClose = true;
            },
			showEditView(data){
				this.baseUserInfo = data;
				this.title = '修改基地账号';
				this.dialogVisible = true;
				this.disabled = true;
			},
			currentChange(page){
				this.current = page;
				this.initBaseUsers();
			},
			
        },
    }
</script>

<style scoped>
    .searchInput{
        width: 300px;
        margin-right: 8px;
    }
    .baseMain{
        margin-top: 10px;
    }
	
</style>